<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-tabs v-model="filters.pd" @tab-click="getList(1)">
      <el-tab-pane v-for="s in tab" :key="s.value" :label="s.label" :name="s.value">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.ddh')"
            prop="orderId"
            show-overflow-tooltip
            min-width="220"
          />
          <el-table-column
            align="center"
            :label="$t('message.cdxx')"
            prop="name"
            min-width="500"
          >
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.siteList" :key="index">
                {{
                  item.projectName + '-' +
                    item.siteModelName +
                    " " +
                    item.day +
                    item.beginTime +
                    "~" +
                    item.endTime +
                    " " +
                    $t('message.oldprice') + "：" +
                    item.price +
                    " " +
                    $t('message.zhj') + "：" +
                    item.memberPrice
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.ydfs')"
            prop="channelType"
            show-overflow-tooltip
            min-width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.userType == "0" ? $t('message.hy') : $t('message.sk') }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.ydr')"
            min-width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.userType == '0'? scope.row.memberName + " " + scope.row.memberPhone : scope.row.userName + " " + scope.row.userPhone }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.czy')"
            min-width="100"
            show-overflow-tooltip
            prop="creatorName"
          />
          <el-table-column
            align="center"
            :label="$t('message.createTime')"
            min-width="170"
            show-overflow-tooltip
            prop="createTime"
          />
          <el-table-column
            :label="$t('message.bz')"
            prop="remarks"
            min-width="200"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { siteOrderListPc } from '@/api'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'ReserveList',
  components: {
    QueryForm
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'orderId',
          type: 'input',
          label: this.$t('message.ddh'),
          clearable: true
        }, {
          filed: 'userInfo',
          type: 'input',
          label: this.$t('message.hy4'),
          placeholder: this.$t('message.qsr') + this.$t('message.hy4'),
          clearable: true
        }, {
          filed: 'userType',
          type: 'select',
          label: this.$t('message.ydfs'),
          clearable: true,
          options: [
            { value: '0', label: this.$t('message.hy') },
            { value: '1', label: this.$t('message.sk') }
          ]
        }, {
          filed: 'time',
          start: this.$t('message.mrjt'),
          end: this.$t('message.mrjt'),
          type: 'daterange',
          clearable: true
        }],
        online: true
      },
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {
        time: [parseTime(new Date()).slice(0, 10), parseTime(new Date()).slice(0, 10)]
      },
      listLoading: true,
      tab: [
        { value: '', label: this.$t('message.ydlb') },
        { value: '1', label: this.$t('message.qxydlb') }
      ]
    }
  },
  created() {
    this.getList(1)
  },
  activated() {
    if (this.list && this.list.length > 0) {
      this.$refs.table.doLayout()
    }
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    clearList() {
      const pd = this.filters.pd
      this.filters = {
        pd: pd
      }
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (filters.time && filters.time.length > 0) {
        filters.startDate = filters.time[0] + ' 00:00:00'
        filters.endDate = filters.time[1] + ' 23:59:59'
      } else {
        filters.startDate = parseTime(new Date()).slice(0, 10) + ' 00:00:00'
        filters.endDate = parseTime(new Date()).slice(0, 10) + ' 23:59:59'
      }
      if (filters.pd === '1') {
        filters.statusType = 1
        filters.payStatus = ''
      } else {
        filters.statusType = 0
        filters.payStatus = '0'
      }
      const venueId = sessionStorage.getItem('venueId')
      pagination.firstQueryTime = parseTime(new Date())
      siteOrderListPc({ pagination, param: { venueId, ...filters }})
        .then(res => {
          this.list = res.recordList
          this.total = res.totalCount
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
